<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>云上电子书</title>
		<link rel="icon" href="http://47.100.102.177:8080/app/images/common/云上书屋.png" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/nav.css" />
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/index/index02-style.css">
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/plugin/bootstrap-3.4.1-dist/css/bootstrap.css">
		<link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/swiper-bundle.min.css">
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/foot.css" />
		<script src="http://47.100.102.177:8080/app/js/common/swiper-bundle.min.js"></script>
	</head>
	<style>
		/*logo*/
    .logo-line{
        position: relative;
        top: 40px;
        width: auto;
        height: 85px;
        overflow: hidden;
    }

    .logo{
        width: 220px;
        height: 85px;
        position: absolute;
        background-image: url("http://47.100.102.177:8080/app/images/common/logo.png");
        background-size: cover;
    }

    /*搜索框*/
    .search>input{
        width: 600px;
        height: 40px;
        top: 25px;
        border: 1px solid rgb(196,219,102);
        position: absolute;
        left: 310px;
        outline:none;

    }

    .search>button{
        border: 1px solid rgb(196, 219, 102);
        width: 48px;
        height: 42px;
        position: absolute;
        top: 25px;
        left: 910px;
        background-image: url("http://47.100.102.177:8080/app/images/index/查询.png");
        background-size: 45px;
    }

    .search>button:hover{
        background-color: white;
    }

    .logo-line h2{
        position: absolute;
        right: 200px;
        top: 10px;
        color:rgb(196, 219, 102)
    }
</style>
	<body>
		<div class="contain">
			<!--定义头部-->
			<div class='nav'>
				<ul>
					<li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
					<li><a id="first">主页</a></li>
					<li><a href='#'>分类</a>
						<ul>
							<li><a href='./index01'>图书</a></li>
							<li><a href='./index02'>电子书</a></li>
						</ul>
					</li>
					<book:if test="${user!=null}">
						<li><a href='#'>${user.uname}</a>
							<ul>
								<li><a href='./car/shoppingcar?account=${user.account}'>购物车</a></li>
								<li><a href='./personal/center?status=1'>个人信息</a></li>
								<li><a href='./order/order'>订单信息</a></li>
							</ul>
						</li>
						<li><a href="/boot/users/exit">安全退出</a></li>
					</book:if>
					<li><a href='login'>登陆</a></li>
					<li><a href='login'>注册</a></li>
				</ul>
			</div>
			<!--定义logo和搜索框-->
			<div class="logo-line">
				<div class="logo"></div>
				<div class="search">
					<input  id="Search" type="text" placeholder="请输入...">
					<button type="button" class="button" onclick="search_book()"></button>
				</div>
			</div>
			<!--主页-->
			<div class="banners">
				<nav>
					<div class="top">电子书分类</div>
					<ul>
						<div class="new_aside">
							<dl class="new_title ">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=2">小说</a></dt>
								<dd><a target="_blank" href="#">侦探/悬疑/推理 </a></dd>
								<dd><a target="_blank" href="#">情感/都市</a></dd>
								<dd><a target="_blank" href="#">科幻/魔幻</a></dd>
								<dd><a target="_blank" href="#">作品集</a></dd>
								<dd><a target="_blank" href="#">外国小说</a></dd>
							</dl>
							<dl class="new_title even">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=1">文艺</a></dt>
								<dd><a target="_blank" href="#">文学</a></dd>
								<dd><a target="_blank" href="#">青春文学</a></dd>
								<dd><a target="_blank" href="#">传记</a></dd>
								<dd><a target="_blank" href="#">艺术</a></dd>
								<dd><a target="_blank" href="#">动漫/幽默</a></dd>
							</dl>
							<dl class="new_title ">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=10">社会</a></dt>
								<dd><a target="_blank" href="#">哲学/宗教</a></dd>
								<dd><a target="_blank" href="#">历史</a></dd>
								<dd><a target="_blank" href="#">政治/军事</a></dd>
								<dd><a target="_blank" href="#l">文化</a></dd>
								<dd><a target="_blank" href="#">社会科学</a></dd>
								<dd><a target="_blank" href="#">古籍</a></dd>
								<dd><a target="_blank" href="#">法律</a></dd>
							</dl>
							<dl class="new_title even">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=4">经济/管理</a></dt>
								<dd><a target="_blank" href="#">管理</a></dd>
								<dd><a target="_blank" href="#">经济</a></dd>
								<dd><a target="_blank" href="#">投资理财</a></dd>
								<dd><a target="_blank" href="#">市场/营销</a></dd>
								<dd><a target="_blank" href="#">商务沟通</a></dd>
								<dd><a target="_blank" href="#">中国经济</a></dd>
								<dd><a target="_blank" href="#">国际经济</a></dd>
							</dl>
							<dl class="new_title ">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=7">心理/励志</a></dt>
								<dd><a target="_blank" href="#">心理学</a></dd>
								<dd><a target="_blank" href="#">女性心理学</a></dd>
								<dd><a target="_blank" href="#">儿童心理学</a></dd>
								<dd><a target="_blank" href="#">情绪管理</a></dd>
								<dd><a target="_blank" href="#">职场/人际交往</a></dd>
								<dd><a target="_blank" href="#">人生哲学</a></dd>
							</dl>
							<dl class="new_title even">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=8">生活</a></dt>
								<dd><a target="_blank" href="#">两性关系</a></dd>
								<dd><a target="_blank" href="#">亲子/家教</a></dd>
								<dd><a target="_blank" href="#">旅游/地图</a></dd>
								<dd><a target="_blank" href="#">烹饪/美食</a></dd>
								<dd><a target="_blank" href="#">保健/养生</a></dd>
							</dl>
							<dl class="new_title ">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=5">童书</a></dt>
								<dd><a target="_blank" href="#">儿童文学</a></dd>
								<dd><a target="_blank" href="#">启蒙读物</a></dd>
								<dd><a target="_blank" href="#">少儿英语</a></dd>
								<dd><a target="_blank" href="#">动漫/图画书</a></dd>
							</dl>
							<dl class="new_title even">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=9">科技</a></dt>
								<dd><a target="_blank" href="#">科普读物</a></dd>
								<dd><a target="_blank" href="#">计算机/网络</a></dd>
								<dd><a target="_blank" href="#">自然科学</a></dd>
							</dl>
							<dl class="new_title ">
								<dt><a target="_blank" href="/boot/ebook/index?bookTypeId=6">文化</a></dt>
								<dd><a target="_blank" href="#">外文原版书</a></dd>
								<dd><a target="_blank" href="#">港台圖書</a></dd>
								<dd><a target="_blank" href="#">小语种</a></dd>
							</dl>
							<p class="newmore"><a target="_blank" href="#">查看更多</a></p>
						</div>
					</ul>
				</nav>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/b01.webp"></div>
						<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/b02.webp"></div>
						<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/b03.webp"></div>
						<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/b04.webp"></div>
						<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/b05.webp"></div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
					<!-- 如果需要导航按钮 -->
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
					<!-- 如果需要滚动条 -->
					<div class="swiper-scrollbar"></div>
				</div>
				/*侧边推荐广告*/
				<div class="index_content_right">
					<div class="recommend_book_adv">
						<a target="_blank">
							<img src="http://img63.ddimg.cn/cuxiao/xiaxin375-210.jpg" alt="匣心记" style="display: inline;">
						</a>
						<a target="_blank">
							<img src="http://img63.ddimg.cn/cuxiao/chichu375-210-.jpg" alt="吃出自愈力" style="display: inline;">
						</a>
						<a target="_blank">
							<img src="http://img60.ddimg.cn/cuxiao/shengming.jpg" alt="生命的反转:急重症科医生手记" style="display: inline;">
						</a>
					</div>
				</div>
				/*商品展示栏*/
				<div class="product-a">
					<div class="pro-title-a">
						<h2 id="color">热品推荐</h2>
						<div class="pro-com">
							<div class="con-title">
								<ul id="table">
									<li class="active">火爆推荐</li>
									<li>文学传记</li>
									<li>经济管理</li>
									<li>社会生活</li>
									<li>科技教育</li>
									<li>成功励志</li>
									<li>人文历史</li>
								</ul>
							</div>
							<div id="content">
								<div class="con-list" style="display: block">
									<book:forEach items="${pageInfo1.list}" var="e">
									<div class="bookCell" onclick="sendEBookId(this)">
										<input type="hidden" class="thisEBookId" value="${e.ebkId}">
										<div class="bookImgCon">
											<img class="bookImg" src="${e.pictureUrl}"
											 style="display: inline;">
										</div>
										<div class="bookDesc">
											<p class="bookTip">${e.title}</p>
											<p class="bookWriter">${e.author}  ${e.date}</p>
											<p class="bookTag">
												<span>￥<em>${e.price}</em></span>
											</p>
										</div>
									</div>
									</book:forEach>
								</div>
								<div class="con-list">
									<book:forEach items="${pageInfo2.list}" var="e">
										<div class="bookCell " onclick="sendEBookId(this)">
											<input type="hidden" class="thisEBookId" value="${e.ebkId}">
											<div class="bookImgCon">
												<img class="bookImg" src="${e.pictureUrl}"
													 style="display: inline;">
											</div>
											<div class="bookDesc">
												<p class="bookTip">${e.title}</p>
												<p class="bookWriter">${e.author}  ${e.date}</p>
												<p class="bookTag">
													<span>￥<em>${e.price}</em></span>
												</p>
											</div>
										</div>
									</book:forEach>
								</div>
								<div class="con-list">
									<book:forEach items="${pageInfo4.list}" var="e">
										<div class="bookCell " onclick="sendEBookId(this)">
											<input type="hidden" class="thisEBookId" value="${e.ebkId}">
											<div class="bookImgCon">
												<img class="bookImg" src="${e.pictureUrl}"
													 style="display: inline;">
											</div>
											<div class="bookDesc">
												<p class="bookTip">${e.title}</p>
												<p class="bookWriter">${e.author}  ${e.date}</p>
												<p class="bookTag">
													<span>￥<em>${e.price}</em></span>
												</p>
											</div>
										</div>
									</book:forEach>
								</div>
								<div class="con-list">
									<book:forEach items="${pageInfo8.list}" var="e">
										<div class="bookCell " onclick="sendEBookId(this)">
											<input type="hidden" class="thisEBookId" value="${e.ebkId}">
											<div class="bookImgCon">
												<img class="bookImg" src="${e.pictureUrl}"
													 style="display: inline;">
											</div>
											<div class="bookDesc">
												<p class="bookTip">${e.title}</p>
												<p class="bookWriter">${e.author}  ${e.date}</p>
												<p class="bookTag">
													<span>￥<em>${e.price}</em></span>
												</p>
											</div>
										</div>
									</book:forEach>
								</div>
								<div class="con-list">
									<book:forEach items="${pageInfo9.list}" var="e">
										<div class="bookCell " onclick="sendEBookId(this)">
											<input type="hidden" class="thisEBookId" value="${e.ebkId}">
											<div class="bookImgCon">
												<img class="bookImg" src="${e.pictureUrl}"
													 style="display: inline;">
											</div>
											<div class="bookDesc">
												<p class="bookTip">${e.title}</p>
												<p class="bookWriter">${e.author}  ${e.date}</p>
												<p class="bookTag">
													<span>￥<em>${e.price}</em></span>
												</p>
											</div>
										</div>
									</book:forEach>
								</div>
								<div class="con-list">
									<book:forEach items="${pageInfo7.list}" var="e">
										<div class="bookCell " onclick="sendEBookId(this)">
											<input type="hidden" class="thisEBookId" value="${e.ebkId}">
											<div class="bookImgCon">
												<img class="bookImg" src="${e.pictureUrl}"
													 style="display: inline;">
											</div>
											<div class="bookDesc">
												<p class="bookTip">${e.title}</p>
												<p class="bookWriter">${e.author}  ${e.date}</p>
												<p class="bookTag">
													<span>￥<em>${e.price}</em></span>
												</p>
											</div>
										</div>
									</book:forEach>
								</div>
								<div class="con-list">
									<book:forEach items="${pageInfo6.list}" var="e">
										<div class="bookCell " onclick="sendEBookId(this)">
											<input type="hidden" class="thisEBookId" value="${e.ebkId}">
											<div class="bookImgCon">
												<img class="bookImg" src="${e.pictureUrl}"
													 style="display: inline;">
											</div>
											<div class="bookDesc">
												<p class="bookTip">${e.title}</p>
												<p class="bookWriter">${e.author}  ${e.date}</p>
												<p class="bookTag">
													<span>￥<em>${e.price}</em></span>
												</p>
											</div>
										</div>
									</book:forEach>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--底部-->
			<div class="foot">

				<!-- 多快好省start -->
				<div class="dkhs">
					<ul>
						<li>
							<div class="duo"></div>
							<p>品类齐全，轻松购物</p>
						</li>
						<li>
							<div class="kuai"></div>
							<p>多仓直发，急速配送</p>
						</li>
						<li>
							<div class="hao"></div>
							<p>正平行货，精致服务</p>
						</li>
						<li>
							<div class="sheng"></div>
							<p>天天低价，畅选无忧</p>
						</li>
					</ul>
				</div>
				<!-- 多快好省end -->

				<!-- 结尾start -->
				<div class="jiewei">
					<div class="j1">
						<ul>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">关于我们</a></li>
							<li class="line"></li>
							<li><a href="#">English</a></li>
							<li class="line"></li>
							<li><a href="#">Site</a></li>
							<li class="line"></li>
							<li><a href="#">Media & IR</a></li>
							<li class="line"></li>
						</ul>
					</div>
					<div class="j2">
						<p>云上书屋收录的免费书籍作品、频道内容、书友评论、用户上传文字、图片等其他一切内容及在云上书屋所做之广告均属用户个人行为，与本网站无关。
						</p>
					</div>
					<div class="j3">
						<ul>
							<li class="l1"><a href="#"></a></li>
							<li class="l2"><a href="#"></a></li>
							<li class="l3"><a href="#"></a></li>
							<li class="l4"><a href="#"></a></li>
							<li class="l5"><a href="#"></a></li>
							<li class="l6"><a href="#"></a></li>
						</ul>
					</div>
				</div>
				<!-- 结尾end -->
			</div>
		</div>
	</body>
	<script>
		/*轮播图*/
		var mySwiper = new Swiper('.swiper-container', {
			loop: true, // 循环模式选项
			autoplay: true,
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			// 如果需要滚动条
			scrollbar: {
				el: '.swiper-scrollbar',
			},
		})
		/*变色*/
		var colors = new Array("red", "orange", "green", "blue", "browm", "putple", "black", "rgb(172, 218, 224)");
		var ind = 0;

		function changecolor() {
			let h = document.getElementById("color");
			if (ind == (colors.length)) {
				ind = 0
			}
			h.style.color = colors[ind];
			ind++;
		}
		setInterval("changecolor()", 500);
		/*商品页面*/
		var nav = document.getElementById("table");
		var navlist = nav.children;
		var con = document.getElementById("content");
		var conlist = con.children;
		for (var i = 0; i < navlist.length; i++) {
			navlist[i].index = i;
			navlist[i].onmouseover = function() {
				for (var m = 0; m < conlist.length; m++) {
					navlist[m].className = "";
					conlist[m].style.display = "none";
				}
				this.className = "active";
				conlist[this.index].style.display = "block";
			}
		}

		function search_book(){
			let title=document.getElementById("Search").value;
			window.location="/boot/ebook/index?name="+title;
		}

		function sendEBookId(obj){
			let ebookId = obj.getElementsByClassName("thisEBookId")[0].value;
			window.location='/boot/detail/ebook?ebookId='+ebookId;
		}
	</script>
</html>
